<template>
  <a-modal
    :title="title"
    :width="700"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="车位编号">
          <a-input
            placeholder="请输入车位编号"
            v-decorator="['parkNumber', {rules: [{required: true, message: '请输入车位编号!' },{max:10,message:'车位编号最大长度为10个字符'}]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所在区域">
          <a-select
            labelInValue
            :options="areaIdOptions"
            @select="areaSelect"
            placeholder="请选择车位所在区域"
            v-decorator="['areaId', {}]"/>
        </a-form-item>
        <a-form-item v-show="false" label="所在区域名称">
          <a-input
          v-decorator="['areaName',{}]">
          </a-input>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {getAction, httpAction} from "@api/manage";

export default {
  name: "ParkingSpaceAddModal",
  data(){
    return{
     form:this.$form.createForm(this),
      title:'',
      visible:false,
      confirmLoading:false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
        style: 'textAlign: left',
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      model: {},
      url:{
        add:"/parkCar/parkNumber/add",
        areaList:"/area/parkAreaInfo/getAreaInfos",
      },
      areaIdOptions:[{label:'请选择区域',value:""}]
    }
  },
  mounted() {
    this.loadAreaList()
  },
  methods:{
    edit(){
      this.form.resetFields();
      this.visible = true;
    },
    handleOk(){
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          let formData = Object.assign(this.model, values);
          if(formData.areaId!==undefined&&formData.areaId.key!==undefined)
          {
            formData.areaId = formData.areaId.key
          }
          this.confirmLoading = true
          httpAction(that.url.add, formData, 'post').then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
              that.close();
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel(){
      this.close()
    },
    close () {
      this.$emit('ok');
      this.visible = false;
    },

    areaSelect(value){
      this.form.setFieldsValue({areaName:value.label})
    },
    loadAreaList(){
      const that = this
      if(!this.url.areaList)
      {
        this.$message.error("请设置this.url.areaList属性!")
        return
      }
      this.loading=true
      let params = {}
      getAction(this.url.areaList,params).then(res=>{
        if(res.success){
          that.areaIdOptions = [{value:"",label:'请选择区域'}]
          res.result.forEach(area=>{
            that.areaIdOptions.push({
              value:area.id,
              label:area.areaName
            })
          })
        }else {
          this.$message.error(res.message);
        }
        that.loading = false
      })
    },
  }
}
</script>

<style scoped>

</style>
